<ti-dominator
  [multiple]="multiple"
  [maxLine]="maxLine"
  [placeholder]="placeholder"
  [selectedTipPosition]="selectedTipPosition"
  [tipMaxWidth]="tipMaxWidth"
  [labelKey]="labelKey"
  [showSelectedNumber]="showSelectedNumber"
  [showSelectedNumberTip]="showSelectedNumberTip"
  [selectedNumberTipPosition]="selectedNumberTipPosition"
  [(ngModel)]="modelWhole"
  [disabled]="disabled"
  [clearable]="clearable"
  (click)="onClickDominator()"
  [id]="appendId('dominator')"
  (delete)="onDeleteDominator()"
  (clear)="onClearDominator()"
>
  <ng-template #selected let-item>
    <ng-container
      *ngTemplateOutlet="selectedTemplate?selectedTemplate:itemTemplate?itemTemplate:defaultItemTemplate; context: {$implicit: item}"
    ></ng-container>
  </ng-template>
  <ng-template #placeholder *ngIf="placeholderTemplate">
    <ng-container *ngTemplateOutlet="placeholderTemplate"></ng-container>
  </ng-template>
</ti-dominator>
<ti-dropsearch
  [multiple]="multiple"
  [searchable]="searchable"
  [searchKeys]="searchKeys"
  [virtual]="virtual"
  [itemSize]="itemSize"
  [selectAll]="selectAll"
  [labelKey]="labelKey"
  [options]="options"
  [noDataText]="noDataText"
  [dominatorSpace]="dominatorSpace"
  [(ngModel)]="modelWhole"
  [dominatorElem]="dominatorCom.nativeElement"
  [panelWidth]="panelWidth"
  [panelMaxHeight]="panelMaxHeight"
  [size]="size"
  [tipPosition]="tipPosition"
  [tipMaxWidth]="tipMaxWidth"
  [id]="appendId('droplist')"
  [idKey]="idKey"
  [referElem]="appendToBody ? undefined : nativeElement"
  [reserveSearchword]="reserveSearchword"
  (select)="onSelect($event)"
  (beforeSearch)="onBeforeSearch()"
  (scrollToBottom)="onScrollToBottom($event)"
>
  <ng-template #item let-item let-i="index">
    <ng-container *ngTemplateOutlet="itemTemplate?itemTemplate:defaultItemTemplate; context: {$implicit: item, index: i}"></ng-container>
  </ng-template>
  <ng-template #footer>
    <ng-container *ngTemplateOutlet="footerTemplate?footerTemplate:defaultFooterTemplate;"></ng-container>
  </ng-template>
</ti-dropsearch>

<ng-template #defaultItemTemplate let-item let-i="index"><span [title]="item[labelKey]">{{item[labelKey]}}</span></ng-template>

<ng-template #defaultFooterTemplate> </ng-template>
